<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">
</head>
<body>
<!--此页面应有个人信息、头像、账户安全、我的课程-->
<nav class="ui attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui menu secondary font-size-middle font-y-center">

                <span class="ui teal header item">
                <img src="../../static/imges/1.png" th:src="@{/imges/1.png}" class="image-size-mini"/>
                </span>
            <a class="item" th:href="@{/}"><i class="home icon"></i>首页</a>
            <a class="item" th:href="@{/sy/syuser/syclass}"><i class="building icon"></i>sy课堂</a>
            <a class="item" href="aboutwe.html" th:href="@{/sy/syuser/aboutwe}"><i class="info icon"></i>关于我们</a>

            <div class="item right" th:if="${session.User}">
                <div class="ui simple dropdown">
                    <img class="ui avatar image dropdown" src="../static/imges/user.jpg" th:src="${session.User.userImg}">
                    <span th:text="${session.User.userName}"></span>
                    <div class="menu">
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" class="item"><i class="user circle icon"></i>个人主页</a>
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" class="item"><i class="edit outline icon"></i>管理中心</a>
                        <a href="/sy/syuser/logout" class="item"><i class="sign out alternate icon"></i>退出登录</a>
                    </div>
                </div>
            </div>

        </div>

    </div>
</nav>
<!--中间内容-->
<div class="ui container m-padded-tb-middle">
        <div class="ui grid">
            <!--  左侧导航栏  -->
            <div class="five wide column slide">
                <div class="ui link list segment" style="height: 400px">
                    <div class="active item m-padded-tb-middle font-x-center">个人中心</div>
                    <a class="item"><button class="fluid ui button teal active m-padded-tb-middle" id="xinxi">个人信息</button></a>
                    <a class="item" href="myclass.html" th:href="@{/sy/xktable/showmyclass}"><button class="fluid ui button teal m-padded-tb-middle" id="kecheng">我的课程</button></a>
                    <a class="item" href="SeCenter.html" th:href="@{/sy/syuser/SeCenter}"><button class="fluid ui button teal m-padded-tb-middle" id="anquan">账号安全</button></a>
                </div>
            </div>
            <!--   右侧内容 -->
            <div class="eleven wide column" id="pc_classp">
                <div class="ui segment font-x-center" style="height: 630px" id="pc_page">
                    <!--我的信息模块-->
                    <div class="ui secondary pointing menu" id="father1">
                        <!--       这里的active是被选中的意思     -->
                        <a class="item active xuanzhong1" id="qiehuan1">我的信息 </a>
                        <a class="item xuanzhong2" id="qiehuan2">我的头像 </a>
                    </div>
                    <div class="ui segment" id="geren1">
                        <table class="ui very basic collapsing celled table">
                            <thead>
                            <tr><th>用户名：</th>
                                <th th:text="${session.User.userName}"></th>
                            </tr></thead>
                            <tbody>
                            <tr>
                                <td>
                                    <h4 class="ui header">
                                        <div class="content">用户类型：</div>
                                    </h4>
                                </td>
                                <td th:if="${session.User.userPrivilege}==0">
                                    学生
                                </td>
                                <td th:if="${session.User.userPrivilege}==1">
                                    教师
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>

                    <div id="geren2" hidden>

                        <div class="ui grid m-touxiang-div m-padded-t-big">
                            <!--  头像  -->
                            <div class="five wide column slide" id="yulan">

                                <img id="lodeaimg" class="image-size-big" src="../../static/imges/timg.jpg" th:src="${session.User.userImg}">

                            </div>
                            <!--   上传 -->
                            <div class="eleven wide column">
                                <form id="uploadForm" name="uploadForm">
                                    <input hidden type="file" name="imageData" id="imageData" class="imageData" onchange="showImg(this)">
                                </form>
                                <a href="javascript:void(0);" onclick="openFile();" class="font-color-green font-size-middle">+上传图片</a>
                                <p class="font-tmd m-padded-t-middle">推荐大小 180 * 180 像素，支持 JPG、PNG等格式，图片小于1M</p>
                                <br>
                                <button class="ui teal button" onclick="upload();" id="upimages" disabled="disabled">更新头像</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<input id="username" type="text" hidden th:value="${session.User.userName}">
</div>

<!--footer-->
<footer class="ui vertical segment b-color m-padded-tb-big">
    <div class="ui container">
        <div class="ui grid">
            <div class="eight wide column">
                <a class="item" href="aboutwe.html" th:href="@{/sy/syuser/aboutwe}">关于我们</a><br><br><br>
                <span class="ui teal header" style="display: inline;">
                        <img src="../../static/imges/1.png" th:src="@{/imges/1.png}"/></span>
                <span class="font-tmd">&nbsp;生命可以随心所欲，但不可以随波逐流。</span>
            </div>

            <div class="eight wide column font-tmd">
                计科172 梁瑜<br>
                2020/10/28
            </div>
        </div>
    </div>
</footer>
</body>
<script src="../../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<script src="../../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script type="text/javascript">
<!--    图片上传-->
    function openFile() {
        $("#imageData").trigger("click");
    }
    //图片预览
    function showImg(obj){
        var patter = /(\.*.jpg$)|(\.*.png$)|(\.*.gif$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.GIF$)|(\.*.BMP$)/;
        if(!patter.test($(obj).val())){
            alert('系统不支持图片的格式');
        }else {
            var file = obj.files[0];
            var l = window.URL.createObjectURL(file)
            $("#upimages").removeAttr("disabled");
            $('#yulan').html("<img class='image-size-big' src='"+l+"'>");
        }
    }
    //更新头像上传到oss
    function upload(){
        var formdata = new FormData(document.getElementById("uploadForm"));
        $.ajax({
            type:'POST',
            url:'/sy/syuser/uploadFile',
            data: formdata,
            processData:false,
            contentType:false,
            async: false,
            cache: true,
            success:function(data){
                if(data==="null"){
                    alert("没有获取到上传文件")
                }
                if(data==="true"){
                    window.location.replace("/sy/syuser/reuserdata");
                }

            },
            error:function(){
                alert("出错了")
            }

        })
    }
</script>
</html>